Reactನ useEvent: ಸ್ಥಿರ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳ ಭವಿಷ್ಯದ ಆಳವಾದ ಅಧ್ಯಯನ

Reactನ ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವ ಭೂದೃಶ್ಯದಲ್ಲಿ, ಪ್ರಮುಖ ತಂಡವು ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಮತ್ತು ಸಾಮಾನ್ಯ ನೋವು ಬಿಂದುಗಳನ್ನು ಪರಿಹರಿಸಲು ನಿರಂತರವಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತದೆ. ಆರಂಭಿಕರಿಗಾಗಿ ಅನುಭವಿ ತಜ್ಞರಿಗೆ, ಡೆವಲಪರ್‌ಗಳಿಗೆ ಇರುವ ಅತ್ಯಂತ ನಿರಂತರ ಸವಾಲುಗಳಲ್ಲಿ ಒಂದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು, ಉಲ್ಲೇಖಿತ ಸಮಗ್ರತೆ, ಮತ್ತು useEffect ಮತ್ತು useCallback ನಂತಹ ಹುಕ್‌ಗಳ ಕುಖ್ಯಾತ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು. ವರ್ಷಗಳಿಂದ, ಡೆವಲಪರ್‌ಗಳು ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್ ಮತ್ತು ಹಳಸಿದ ಮುಚ್ಚುವಿಕೆಗಳಂತಹ ದೋಷಗಳನ್ನು ತಪ್ಪಿಸುವ ನಡುವೆ ಸೂಕ್ಷ್ಮವಾದ ಸಮತೋಲನವನ್ನು ಕಾಪಾಡಿಕೊಂಡಿದ್ದಾರೆ.

useEvent ಅನ್ನು ನಮೂದಿಸಿ, ಇದು React ಸಮುದಾಯದಲ್ಲಿ ಗಮನಾರ್ಹ ಉತ್ಸಾಹವನ್ನು ಹುಟ್ಟುಹಾಕಿದ ಪ್ರಸ್ತಾವಿತ ಹುಕ್ ಆಗಿದೆ. ಇನ್ನೂ ಪ್ರಾಯೋಗಿಕವಾಗಿದ್ದರೂ ಮತ್ತು ಇನ್ನೂ ಸ್ಥಿರವಾದ React ಬಿಡುಗಡೆಯ ಭಾಗವಾಗಿಲ್ಲದಿದ್ದರೂ, ಅದರ ಪರಿಕಲ್ಪನೆಯು ಹೆಚ್ಚು ಅರ್ಥಗರ್ಭಿತ ಮತ್ತು ದೃಢವಾದ ಈವೆಂಟ್ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಭವಿಷ್ಯದ ಒಂದು ಆಕರ್ಷಕ ನೋಟವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು useEvent ಪರಿಹರಿಸಲು ಉದ್ದೇಶಿಸಿರುವ ಸಮಸ್ಯೆಗಳು, ಅದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅದರ ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಿಕೆಗಳು ಮತ್ತು React ಅಭಿವೃದ್ಧಿಯ ಭವಿಷ್ಯದಲ್ಲಿ ಅದರ ಸಂಭಾವ್ಯ ಸ್ಥಾನವನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.

ಪ್ರಮುಖ ಸಮಸ್ಯೆ: ಉಲ್ಲೇಖಿತ ಸಮಗ್ರತೆ ಮತ್ತು ಡಿಪೆಂಡೆನ್ಸಿ ಡ್ಯಾನ್ಸ್

useEvent ಏಕೆ ಮಹತ್ವದ್ದಾಗಿದೆ ಎಂಬುದನ್ನು ನಿಜವಾಗಿಯೂ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ಅದು ಪರಿಹರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಸಮಸ್ಯೆಯನ್ನು ನಾವು ಮೊದಲು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. JavaScript ಕಾರ್ಯಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು React ನ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯವಿಧಾನ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಮೂಲದಲ್ಲಿ ಈ ಸಮಸ್ಯೆಯಿದೆ.

ಉಲ್ಲೇಖಿತ ಸಮಗ್ರತೆ ಎಂದರೇನು?

JavaScriptನಲ್ಲಿ, ಕಾರ್ಯಗಳು ವಸ್ತುಗಳಾಗಿವೆ. ನೀವು React ಕಾಂಪೊನೆಂಟ್‌ನ ಒಳಗೆ ಒಂದು ಕಾರ್ಯವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದಾಗ, ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲೂ ಹೊಸ ಕಾರ್ಯ ವಸ್ತುವನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ. ಈ ಸರಳ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ:

            
function MyComponent({ onLog }) {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  // Every time MyComponent re-renders, a brand new `handleClick` function is created.
  return <button onClick={handleClick}>Click Me</button>;
}

            

              
                Copy
              
            
          

ಸರಳ ಬಟನ್‌ಗೆ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ನಿರುಪದ್ರವಿಯಾಗಿದೆ. ಆದಾಗ್ಯೂ, Reactನಲ್ಲಿ, ಈ ನಡವಳಿಕೆಯು ಗಮನಾರ್ಹವಾದ ಕೆಳಮುಖ ಪರಿಣಾಮಗಳನ್ನು ಬೀರುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು ಮತ್ತು ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ವ್ಯವಹರಿಸುವಾಗ. Reactನ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು, React.memo ನಂತಹ ಮತ್ತು ಅದರ ಪ್ರಮುಖ ಹುಕ್‌ಗಳು, useEffect ನಂತಹ, ಮರು-ರನ್ ಅಥವಾ ಮರು-ರೆಂಡರ್ ಮಾಡಬೇಕೆ ಎಂದು ನಿರ್ಧರಿಸಲು ಅವುಗಳ ಡಿಪೆಂಡೆನ್ಸಿಗಳ ಆಳವಿಲ್ಲದ ಹೋಲಿಕೆಗಳನ್ನು ಅವಲಂಬಿಸಿವೆ. ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ಹೊಸ ಕಾರ್ಯ ವಸ್ತುವನ್ನು ರಚಿಸುವುದರಿಂದ, ಅದರ ಉಲ್ಲೇಖ (ಅಥವಾ ಮೆಮೊರಿ ವಿಳಾಸ) ಯಾವಾಗಲೂ ವಿಭಿನ್ನವಾಗಿರುತ್ತದೆ. Reactಗೆ, oldHandleClick !== newHandleClick, ಅವುಗಳ ಕೋಡ್ ಒಂದೇ ಆಗಿದ್ದರೂ ಸಹ.

useCallback ಪರಿಹಾರ ಮತ್ತು ಅದರ ತೊಂದರೆಗಳು

React ತಂಡವು ಇದನ್ನು ನಿರ್ವಹಿಸಲು ಒಂದು ಸಾಧನವನ್ನು ಒದಗಿಸಿದೆ: useCallback ಹುಕ್. ಇದು ಒಂದು ಕಾರ್ಯವನ್ನು ಮೆಮೊೈಸ್ ಮಾಡುತ್ತದೆ, ಅಂದರೆ ಅದರ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಬದಲಾಗದ ಹೊರತು ಮರು-ರೆಂಡರ್‌ಗಳಲ್ಲಿ ಅದೇ ಕಾರ್ಯ ಉಲ್ಲೇಖವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.

            
import React, { useState, useCallback } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    // This function's identity is now stable across re-renders
    console.log(`Current count is: ${count}`); 
  }, [count]); // ...but now it has a dependency

  useEffect(() => {
    // Some effect that depends on the click handler
    setupListener(handleClick);
    return () => removeListener(handleClick);
  }, [handleClick]); // This effect re-runs whenever handleClick changes

  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, ಕೌಂಟ್ ಬದಲಾದರೆ ಮಾತ್ರ handleClick ಹೊಸ ಕಾರ್ಯವಾಗಿರುತ್ತದೆ. ಇದು ಆರಂಭಿಕ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಹೊಸ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ: ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ ಡ್ಯಾನ್ಸ್. ಈಗ, handleClick ಅನ್ನು ಬಳಸುವ ನಮ್ಮ useEffect ಹುಕ್, handleClick ಅನ್ನು ಡಿಪೆಂಡೆನ್ಸಿಯಾಗಿ ಪಟ್ಟಿ ಮಾಡಬೇಕು. handleClick ಕೌಂಟ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುವುದರಿಂದ, ಎಫೆಕ್ಟ್ ಈಗ ಕೌಂಟ್ ಬದಲಾದಾಗಲೆಲ್ಲಾ ಮರು-ರನ್ ಆಗುತ್ತದೆ. ನೀವು ಏನು ಬಯಸುತ್ತೀರೋ ಅದು ಇರಬಹುದು, ಆದರೆ ಹೆಚ್ಚಾಗಿ ಅದು ಅಲ್ಲ. ನೀವು ಒಮ್ಮೆ ಮಾತ್ರ ಲಿಸ್ನರ್ ಅನ್ನು ಹೊಂದಿಸಲು ಬಯಸಬಹುದು, ಆದರೆ ಅದು ಯಾವಾಗಲೂ ಕ್ಲಿಕ್ ಹ್ಯಾಂಡ್ಲರ್‌ನ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯನ್ನು ಕರೆ ಮಾಡುತ್ತದೆ.

ಹಳಸಿದ ಮುಚ್ಚುವಿಕೆಗಳ ಅಪಾಯ

ನಾವು ಮೋಸ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿದರೆ ಏನು? ಕಾರ್ಯವನ್ನು ಸ್ಥಿರವಾಗಿಡಲು useCallback ಅರೇನಿಂದ ಡಿಪೆಂಡೆನ್ಸಿಯನ್ನು ಬಿಟ್ಟುಬಿಡುವುದು ಒಂದು ಸಾಮಾನ್ಯ ಆದರೆ ಅಪಾಯಕಾರಿ ಮಾದರಿಯಾಗಿದೆ.

            
// ANTI-PATTERN: DO NOT DO THIS
const handleClick = useCallback(() => {
  console.log(`Current count is: ${count}`); 
}, []); // Omitted `count` from dependencies

            

              
                Copy
              
            
          

ಈಗ, handleClick ಸ್ಥಿರವಾದ ಗುರುತನ್ನು ಹೊಂದಿದೆ. useEffect ಒಮ್ಮೆ ಮಾತ್ರ ರನ್ ಆಗುತ್ತದೆ. ಸಮಸ್ಯೆ ಪರಿಹಾರವಾಯಿತೇ? ಖಂಡಿತ ಇಲ್ಲ. ನಾವು ಈಗ ಹಳಸಿದ ಮುಚ್ಚುವಿಕೆಯನ್ನು ರಚಿಸಿದ್ದೇವೆ. useCallback ಗೆ ರವಾನೆಯಾದ ಕಾರ್ಯವು ರಚನೆಯಾದ ಸಮಯದಲ್ಲಿ ಸ್ಥಿತಿ ಮತ್ತು ಪ್ರಾಪರ್ಟಿಗಳನ್ನು "ಮುಚ್ಚುತ್ತದೆ". ನಾವು ಖಾಲಿ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ [] ಅನ್ನು ಒದಗಿಸಿದ್ದರಿಂದ, ಕಾರ್ಯವನ್ನು ಆರಂಭಿಕ ರೆಂಡರ್‌ನಲ್ಲಿ ಒಮ್ಮೆ ಮಾತ್ರ ರಚಿಸಲಾಗುತ್ತದೆ. ಆ ಸಮಯದಲ್ಲಿ, ಕೌಂಟ್ 0 ಆಗಿದೆ. ನೀವು ಇನ್‌ಕ್ರಿಮೆಂಟ್ ಬಟನ್ ಅನ್ನು ಎಷ್ಟು ಬಾರಿ ಕ್ಲಿಕ್ ಮಾಡಿದರೂ, handleClick ಶಾಶ್ವತವಾಗಿ "ಪ್ರಸ್ತುತ ಎಣಿಕೆ: 0" ಎಂದು ಲಾಗ್ ಮಾಡುತ್ತದೆ. ಇದು ಕೌಂಟ್ ಸ್ಥಿತಿಯ ಹಳಸಿದ ಮೌಲ್ಯವನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತಿದೆ.

ಇದು ಮೂಲಭೂತ ಸಂದಿಗ್ಧತೆ: ನೀವು ಅನಗತ್ಯವಾದ ಮರು-ರೆಂಡರ್‌ಗಳು ಮತ್ತು ಎಫೆಕ್ಟ್ ಮರು-ರನ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸುವ ನಿರಂತರವಾಗಿ ಬದಲಾಗುತ್ತಿರುವ ಕಾರ್ಯ ಉಲ್ಲೇಖವನ್ನು ಹೊಂದಿದ್ದೀರಿ, ಅಥವಾ ನೀವು ಸೂಕ್ಷ್ಮ ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ಕಷ್ಟಕರವಾದ ಹಳಸಿದ ಮುಚ್ಚುವಿಕೆ ದೋಷಗಳನ್ನು ಪರಿಚಯಿಸುವ ಅಪಾಯವನ್ನು ಎದುರಿಸುತ್ತೀರಿ.

useEvent ಅನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ: ಎರಡೂ ಪ್ರಪಂಚಗಳ ಅತ್ಯುತ್ತಮ ಅಂಶಗಳು

ಪ್ರಸ್ತಾವಿತ useEvent ಹುಕ್ ಈ ಟ್ರೇಡ್-ಆಫ್ ಅನ್ನು ಮುರಿಯಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದರ ಪ್ರಮುಖ ಭರವಸೆ ಸರಳವಾಗಿದೆ ಆದರೆ ಕ್ರಾಂತಿಕಾರಿಯಾಗಿದೆ:

ಶಾಶ್ವತವಾಗಿ ಸ್ಥಿರವಾದ ಗುರುತನ್ನು ಹೊಂದಿರುವ ಒಂದು ಕಾರ್ಯವನ್ನು ಒದಗಿಸಿ ಆದರೆ ಅದರ ಅನುಷ್ಠಾನವು ಯಾವಾಗಲೂ ಇತ್ತೀಚಿನ, ಅತ್ಯಂತ ನವೀಕೃತ ಸ್ಥಿತಿ ಮತ್ತು ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುತ್ತದೆ.

ಅದರ ಪ್ರಸ್ತಾವಿತ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ನೋಡೋಣ:

            
import { useEvent } from 'react'; // Hypothetical import

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    // No dependency array needed!
    // This code will always see the latest `count` value.
    console.log(`Current count is: ${count}`);
  });

  useEffect(() => {
    // setupListener is called only once on mount.
    // handleClick has a stable identity and is safe to omit from the dependency array.
    setupListener(handleClick);
    return () => removeListener(handleClick);
  }, []); // No need to include handleClick here!

  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

            

              
                Copy
              
            
          

ಎರಡು ಪ್ರಮುಖ ಬದಲಾವಣೆಗಳನ್ನು ಗಮನಿಸಿ:

1. useEvent ಒಂದು ಕಾರ್ಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಆದರೆ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ ಇಲ್ಲ.
2. useEvent ನಿಂದ ಹಿಂತಿರುಗಿಸಲಾದ handleClick ಕಾರ್ಯವು ಎಷ್ಟು ಸ್ಥಿರವಾಗಿದೆ ಎಂದರೆ React ದಾಖಲೆಗಳು ಅದನ್ನು useEffect ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇನಿಂದ ಬಿಟ್ಟುಬಿಡಲು ಅಧಿಕೃತವಾಗಿ ಅನುಮತಿಸುತ್ತದೆ (ಲಿಂಟ್ ನಿಯಮವನ್ನು ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸಲು ಕಲಿಸಲಾಗುತ್ತದೆ).

ಇದು ಎರಡೂ ಸಮಸ್ಯೆಗಳನ್ನು ಸೊಗಸಾಗಿ ಪರಿಹರಿಸುತ್ತದೆ. ಕಾರ್ಯದ ಗುರುತು ಸ್ಥಿರವಾಗಿದೆ, useEffect ಅನಗತ್ಯವಾಗಿ ಮರು-ರನ್ ಆಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಅದೇ ಸಮಯದಲ್ಲಿ, ಅದರ ಆಂತರಿಕ ತರ್ಕವು ಯಾವಾಗಲೂ ನವೀಕೃತವಾಗಿರುವುದರಿಂದ, ಅದು ಎಂದಿಗೂ ಹಳಸಿದ ಮುಚ್ಚುವಿಕೆಗಳಿಂದ ಬಳಲುತ್ತಿಲ್ಲ. ನೀವು ಸ್ಥಿರವಾದ ಉಲ್ಲೇಖದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಯೋಜನವನ್ನು ಮತ್ತು ಯಾವಾಗಲೂ ಇತ್ತೀಚಿನ ಡೇಟಾವನ್ನು ಹೊಂದಿರುವ ಸರಿಯಾದತೆಯನ್ನು ಪಡೆಯುತ್ತೀರಿ.

useEvent ಇನ್ ಆಕ್ಷನ್: ಪ್ರಾಯೋಗಿಕ ಬಳಕೆಗಳು

useEvent ನ ಪರಿಣಾಮಗಳು ದೂರಗಾಮಿ. ಅದು ಕೋಡ್ ಅನ್ನು ನಾಟಕೀಯವಾಗಿ ಸರಳಗೊಳಿಸುವ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹತೆಯನ್ನು ಸುಧಾರಿಸುವ ಕೆಲವು ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

1. useEffect ಮತ್ತು ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಸರಳಗೊಳಿಸುವುದು

ಇದು ಪ್ರಮಾಣಿತ ಉದಾಹರಣೆಯಾಗಿದೆ. ಜಾಗತಿಕ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಹೊಂದಿಸುವುದು (ವಿಂಡೋ ಮರುಗಾತ್ರಗೊಳಿಸುವಿಕೆ, ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳು ಅಥವಾ WebSocket ಸಂದೇಶಗಳಿಗಾಗಿ) ಒಂದು ಸಾಮಾನ್ಯ ಕಾರ್ಯವಾಗಿದ್ದು, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಒಮ್ಮೆ ಮಾತ್ರ ಸಂಭವಿಸಬೇಕು.

useEvent ಮೊದಲು:

            
function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  const onMessage = useCallback((newMessage) => {
    // We need `messages` to add the new message
    setMessages([...messages, newMessage]);
  }, [messages]); // Dependency on `messages` makes `onMessage` unstable

  useEffect(() => {
    const socket = createSocket(roomId);
    socket.on('message', onMessage);
    return () => socket.off('message', onMessage);
  }, [roomId, onMessage]); // Effect re-subscribes every time `messages` changes
}

            

              
                Copy
              
            
          

ಈ ಕೋಡ್‌ನಲ್ಲಿ, ಪ್ರತಿ ಬಾರಿ ಹೊಸ ಸಂದೇಶ ಬಂದಾಗ ಮತ್ತು ಸಂದೇಶಗಳ ಸ್ಥಿತಿ ನವೀಕರಿಸಿದಾಗ, ಹೊಸ onMessage ಕಾರ್ಯವನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ. ಇದು useEffect ಹಳೆಯ ಸಾಕೆಟ್ ಚಂದಾದಾರಿಕೆಯನ್ನು ಕಿತ್ತುಹಾಕಲು ಮತ್ತು ಹೊಸದನ್ನು ರಚಿಸಲು ಕಾರಣವಾಗುತ್ತದೆ. ಇದು ಅನಗತ್ಯವಾಗಿದೆ ಮತ್ತು ಕಳೆದುಹೋದ ಸಂದೇಶಗಳಂತಹ ದೋಷಗಳಿಗೆ ಸಹ ಕಾರಣವಾಗಬಹುದು.

useEvent ನಂತರ:

            
function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  const onMessage = useEvent((newMessage) => {
    // `useEvent` ensures this function always has the latest `messages` state
    setMessages([...messages, newMessage]);
  });

  useEffect(() => {
    const socket = createSocket(roomId);
    socket.on('message', onMessage);
    return () => socket.off('message', onMessage);
  }, [roomId]); // `onMessage` is stable, so we only re-subscribe if `roomId` changes
}

            

              
                Copy
              
            
          

ಈಗ ಕೋಡ್ ಸರಳವಾಗಿದೆ, ಹೆಚ್ಚು ಅರ್ಥಗರ್ಭಿತವಾಗಿದೆ ಮತ್ತು ಹೆಚ್ಚು ಸರಿಯಾಗಿದೆ. ಸಾಕೆಟ್ ಸಂಪರ್ಕವನ್ನು roomId ಅನ್ನು ಆಧರಿಸಿ ಮಾತ್ರ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ, ಅದು ಇರಬೇಕು, ಸಂದೇಶಗಳಿಗಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಇತ್ತೀಚಿನ ಸ್ಥಿತಿಯನ್ನು ಪಾರದರ್ಶಕವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ.

2. ಕಸ್ಟಮ್ ಹುಕ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು

ಕಸ್ಟಮ್ ಹುಕ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯಗಳನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳಾಗಿ ಸ್ವೀಕರಿಸುತ್ತವೆ. ಕಸ್ಟಮ್ ಹುಕ್‌ನ ಸೃಷ್ಟಿಕರ್ತನು ಬಳಕೆದಾರರು ಸ್ಥಿರವಾದ ಕಾರ್ಯವನ್ನು ರವಾನಿಸುತ್ತಾರೆಯೇ ಎಂಬುದರ ಮೇಲೆ ಯಾವುದೇ ನಿಯಂತ್ರಣವನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ, ಇದು ಸಂಭಾವ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಲೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

useEvent ಮೊದಲು:

API ಅನ್ನು ಪೋಲ್ ಮಾಡಲು ಕಸ್ಟಮ್ ಹುಕ್:

            
function usePolling(url, onData) {
  useEffect(() => {
    const intervalId = setInterval(async () => {
      const data = await fetch(url).then(res => res.json());
      onData(data);
    }, 5000);

    return () => clearInterval(intervalId);
  }, [url, onData]); // Unstable `onData` will restart the interval
}

// Component using the hook
function StockTicker() {
  const [price, setPrice] = useState(0);

  // This function is re-created on every render, causing the polling to restart
  const handleNewPrice = (data) => {
    setPrice(data.price);
  };

  usePolling('/api/stock', handleNewPrice);

  return <div>Price: {price}</div>
}

            

              
                Copy
              
            
          

ಇದನ್ನು ಸರಿಪಡಿಸಲು, usePolling ನ ಬಳಕೆದಾರರು handleNewPrice ಅನ್ನು useCallback ನಲ್ಲಿ ಸುತ್ತುವರೆದಿರುವುದನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳಬೇಕು. ಇದು ಹುಕ್‌ನ API ಅನ್ನು ಕಡಿಮೆ ದಕ್ಷತಾಶಾಸ್ತ್ರವನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.

useEvent ನಂತರ:

ಕಸ್ಟಮ್ ಹುಕ್ ಅನ್ನು useEvent ನೊಂದಿಗೆ ಆಂತರಿಕವಾಗಿ ದೃಢವಾಗಿ ಮಾಡಬಹುದು.

            
function usePolling(url, onData) {
  // Wrap the user's callback in `useEvent` inside the hook
  const stableOnData = useEvent(onData);

  useEffect(() => {
    const intervalId = setInterval(async () => {
      const data = await fetch(url).then(res => res.json());
      stableOnData(data); // Call the stable wrapper
    }, 5000);

    return () => clearInterval(intervalId);
  }, [url]); // Now the effect only depends on `url`
}

// Component using the hook can be much simpler
function StockTicker() {
  const [price, setPrice] = useState(0);

  // No need for useCallback here!
  usePolling('/api/stock', (data) => {
    setPrice(data.price);
  });

  return <div>Price: {price}</div>
}

            

              
                Copy
              
            
          

ಜವಾಬ್ದಾರಿಯನ್ನು ಹುಕ್ ಲೇಖಕರಿಗೆ ವರ್ಗಾಯಿಸಲಾಗುತ್ತದೆ, ಇದರ ಪರಿಣಾಮವಾಗಿ ಹುಕ್‌ನ ಎಲ್ಲಾ ಗ್ರಾಹಕರಿಗೆ ಕ್ಲೀನರ್ ಮತ್ತು ಸುರಕ್ಷಿತ API ಸಿಗುತ್ತದೆ.

3. ಮೆಮೊೈಸ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ ಸ್ಥಿರ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು

React.memo ನಲ್ಲಿ ಸುತ್ತುವರಿದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಪ್ರಾಪರ್ಟಿಗಳಾಗಿ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ರವಾನಿಸುವಾಗ, ಅನಗತ್ಯವಾದ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು ನೀವು useCallback ಅನ್ನು ಬಳಸಬೇಕು. useEvent ಉದ್ದೇಶವನ್ನು ಘೋಷಿಸಲು ಹೆಚ್ಚು ನೇರವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.

            
const MemoizedButton = React.memo(({ onClick, children }) => {
  console.log('Rendering button:', children);
  return <button onClick={onClick}>{children}</button>;
});

function Dashboard() {
  const [user, setUser] = useState('Alice');

  // With `useEvent`, this function is declared as a stable event handler
  const handleSave = useEvent(() => {
    saveUserDetails(user);
  });

  return (
    <div>
      <input value={user} onChange={e => setUser(e.target.value)} />
      {/* `handleSave` has a stable identity, so MemoizedButton won't re-render when `user` changes */}
      <MemoizedButton onClick={handleSave}>Save</MemoizedButton>
    </div>
  );
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನೀವು ಇನ್‌ಪುಟ್ ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಟೈಪ್ ಮಾಡಿದಂತೆ, ಬಳಕೆದಾರ ಸ್ಥಿತಿ ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಸ್ಥಿರವಾದ handleSave ಕಾರ್ಯವಿಲ್ಲದೆ, ಮೆಮೊೈಸ್ಡ್ ಬಟನ್ ಪ್ರತಿ ಕೀಸ್ಟ್ರೋಕ್‌ನಲ್ಲಿಯೂ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ. useEvent ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, handleSave ಒಂದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಆಗಿದೆ ಎಂದು ನಾವು ಸೂಚಿಸುತ್ತೇವೆ, ಅದರ ಗುರುತು ಕಾಂಪೊನೆಂಟ್‌ನ ರೆಂಡರ್ ಸೈಕಲ್‌ಗೆ ಸಂಬಂಧಿಸಿರಬಾರದು. ಇದು ಸ್ಥಿರವಾಗಿರುತ್ತದೆ, ಬಟನ್ ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ, ಆದರೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಅದು ಯಾವಾಗಲೂ ಬಳಕೆದಾರರ ಇತ್ತೀಚಿನ ಮೌಲ್ಯದೊಂದಿಗೆ saveUserDetails ಅನ್ನು ಕರೆಯುತ್ತದೆ.

ಹೂಡ್ ಅಡಿಯಲ್ಲಿ: useEvent ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ?

ಅಂತಿಮ ಅನುಷ್ಠಾನವನ್ನು React ನ ಆಂತರಿಕದಲ್ಲಿ ಹೆಚ್ಚು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲಾಗಿದ್ದರೂ, ಸ್ಥಿರವಾದ ಕಾರ್ಯ ಉಲ್ಲೇಖವನ್ನು ಇತ್ತೀಚಿನ ಅನುಷ್ಠಾನವನ್ನು ಹೊಂದಿರುವ ಮ್ಯೂಟಬಲ್ ರೆಫ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸುವ ಮೂಲಕ ನಾವು ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದು.

ಇಲ್ಲಿ ಒಂದು ಸರಳೀಕೃತ ಪಾಲಿಫಿಲ್ ಇದೆ:

            
import { useRef, useLayoutEffect, useCallback } from 'react';

export function useEvent(handler) {
  // Create a ref to hold the latest version of the handler function.
  const handlerRef = useRef(null);

  // `useLayoutEffect` runs synchronously after DOM mutations but before the browser paints.
  // This ensures the ref is updated before any event can be triggered by the user.
  useLayoutEffect(() => {
    handlerRef.current = handler;
  });

  // Return a stable, memoized function that never changes.
  // This is the function that will be passed as a prop or used in an effect.
  return useCallback((...args) => {
    // When called, it invokes the *current* handler from the ref.
    const fn = handlerRef.current;
    return fn(...args);
  }, []);
}

            

              
                Copy
              
            
          

ಇದನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ:

1. useRef: ನಾವು handlerRef ಅನ್ನು ರಚಿಸುತ್ತೇವೆ. ರೆಫ್ ಎನ್ನುವುದು ಮ್ಯೂಟಬಲ್ ಆಬ್ಜೆಕ್ಟ್ ಆಗಿದ್ದು ಅದು ರೆಂಡರ್‌ಗಳಾದ್ಯಂತ ಉಳಿಯುತ್ತದೆ. ಮರು-ರೆಂಡರ್ ಅನ್ನು ಉಂಟುಮಾಡದೆ ಅದರ .current ಆಸ್ತಿಯನ್ನು ಬದಲಾಯಿಸಬಹುದು.
2. useLayoutEffect: ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ, ಈ ಪರಿಣಾಮವು ರನ್ ಆಗುತ್ತದೆ ಮತ್ತು ನಾವು ಇದೀಗ ಸ್ವೀಕರಿಸಿದ ಹೊಸ ಹ್ಯಾಂಡ್ಲರ್ ಕಾರ್ಯವಾಗಲು handlerRef.current ಅನ್ನು ನವೀಕರಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಪೇಂಟ್ ಮಾಡಲು ಅವಕಾಶವನ್ನು ಹೊಂದುವ ಮೊದಲು ಈ ನವೀಕರಣವು ಸಿಂಕ್ರೊನಸ್ ಆಗಿ ಸಂಭವಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು useEffect ಬದಲಿಗೆ useLayoutEffect ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದು ಒಂದು ಸಣ್ಣ ವಿಂಡೋವನ್ನು ತಡೆಯುತ್ತದೆ, ಅಲ್ಲಿ ಒಂದು ಈವೆಂಟ್ ಫೈರ್ ಆಗಬಹುದು ಮತ್ತು ಹಿಂದಿನ ರೆಂಡರ್‌ನಿಂದ ಹ್ಯಾಂಡ್ಲರ್‌ನ ಹಳತಾದ ಆವೃತ್ತಿಯನ್ನು ಕರೆಯಬಹುದು.
3. [] ನೊಂದಿಗೆ useCallback: ಇದು ಸ್ಥಿರತೆಗೆ ಪ್ರಮುಖವಾಗಿದೆ. ನಾವು ಒಂದು ರ‍್ಯಾಪರ್ ಕಾರ್ಯವನ್ನು ರಚಿಸುತ್ತೇವೆ ಮತ್ತು ಖಾಲಿ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಯೊಂದಿಗೆ ಅದನ್ನು ಮೆಮೊೈಸ್ ಮಾಡುತ್ತೇವೆ. ಇದರರ್ಥ React ಈ ರ‍್ಯಾಪರ್‌ಗಾಗಿ ಎಲ್ಲಾ ರೆಂಡರ್‌ಗಳಲ್ಲಿ ನಿಖರವಾದ ಅದೇ ಕಾರ್ಯ ವಸ್ತುವನ್ನು ಯಾವಾಗಲೂ ಹಿಂದಿರುಗಿಸುತ್ತದೆ. ಇದು ನಮ್ಮ ಹುಕ್‌ನ ಗ್ರಾಹಕರು ಸ್ವೀಕರಿಸುವ ಸ್ಥಿರ ಕಾರ್ಯವಾಗಿದೆ.
4. ಸ್ಥಿರ ರ‍್ಯಾಪರ್: ಈ ಸ್ಥಿರ ಕಾರ್ಯದ ಏಕೈಕ ಕೆಲಸವೆಂದರೆ handlerRef.current ನಿಂದ ಇತ್ತೀಚಿನ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಓದುವುದು ಮತ್ತು ಅದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು, ಯಾವುದೇ ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ರವಾನಿಸುವುದು.

ಈ ಚತುರ ಸಂಯೋಜನೆಯು ನಮಗೆ ಹೊರಭಾಗದಲ್ಲಿ ಸ್ಥಿರವಾಗಿರುವ (ರ‍್ಯಾಪರ್) ಆದರೆ ಒಳಭಾಗದಲ್ಲಿ ಯಾವಾಗಲೂ ಕ್ರಿಯಾತ್ಮಕವಾಗಿರುವ (ರೆಫ್‌ನಿಂದ ಓದುವ ಮೂಲಕ) ಕಾರ್ಯವನ್ನು ನೀಡುತ್ತದೆ, ಇದು ನಮ್ಮ ಸಂದಿಗ್ಧತೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರಿಹರಿಸುತ್ತದೆ.

useEvent ನ ಸ್ಥಿತಿ ಮತ್ತು ಭವಿಷ್ಯ

2023 ರ ಅಂತ್ಯದವರೆಗೆ ಮತ್ತು 2024 ರ ಆರಂಭದವರೆಗೆ, useEvent ಅನ್ನು React ನ ಸ್ಥಿರ ಆವೃತ್ತಿಯಲ್ಲಿ ಬಿಡುಗಡೆ ಮಾಡಲಾಗಿಲ್ಲ. ಇದನ್ನು ಅಧಿಕೃತ RFC (ಕಾಮೆಂಟ್‌ಗಳಿಗಾಗಿ ವಿನಂತಿ) ನಲ್ಲಿ ಪರಿಚಯಿಸಲಾಯಿತು ಮತ್ತು React ನ ಪ್ರಾಯೋಗಿಕ ಬಿಡುಗಡೆ ಚಾನಲ್‌ನಲ್ಲಿ ಸ್ವಲ್ಪ ಸಮಯದವರೆಗೆ ಲಭ್ಯವಿತ್ತು. ಆದಾಗ್ಯೂ, ಪ್ರಸ್ತಾವನೆಯನ್ನು ನಂತರ RFC ಗಳ ರೆಪೊಸಿಟರಿಯಿಂದ ಹಿಂತೆಗೆದುಕೊಳ್ಳಲಾಗಿದೆ ಮತ್ತು ಚರ್ಚೆ ಶಾಂತವಾಗಿದೆ.

ವಿರಾಮ ಏಕೆ? ಹಲವಾರು ಸಾಧ್ಯತೆಗಳಿವೆ:

• ಎಡ್ಜ್ ಕೇಸ್‌ಗಳು ಮತ್ತು API ವಿನ್ಯಾಸ: React ಗೆ ಹೊಸ ಪ್ರಿಮಿಟಿವ್ ಹುಕ್ ಅನ್ನು ಪರಿಚಯಿಸುವುದು ಒಂದು ದೊಡ್ಡ ನಿರ್ಧಾರ. ತಂಡವು ಟ್ರಿಕಿ ಎಡ್ಜ್ ಕೇಸ್‌ಗಳನ್ನು ಕಂಡುಹಿಡಿದಿರಬಹುದು ಅಥವಾ ಸಮುದಾಯದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸ್ವೀಕರಿಸಿರಬಹುದು, ಅದು API ಅಥವಾ ಅದರ ಆಧಾರವಾಗಿರುವ ನಡವಳಿಕೆಯ ಮರುಚಿಂತನೆಗೆ ಕಾರಣವಾಗಿದೆ.
• React ಕಂಪೈಲರ್‌ನ ಏರಿಕೆ: React ತಂಡಕ್ಕೆ ನಡೆಯುತ್ತಿರುವ ಪ್ರಮುಖ ಯೋಜನೆಯೆಂದರೆ React ಕಂಪೈಲರ್ (ಹಿಂದೆ "ಮರೆತುಬಿಡಿ" ಎಂದು ಕೋಡ್‌ನೆಮ್ ಮಾಡಲಾಗಿತ್ತು). ಈ ಕಂಪೈಲರ್ ಘಟಕಗಳು ಮತ್ತು ಹುಕ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮೆಮೊೈಸ್ ಮಾಡುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ, ಡೆವಲಪರ್‌ಗಳು ಹೆಚ್ಚಾಗಿ useCallback, useMemo ಮತ್ತು React.memo ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಬಳಸುವ ಅಗತ್ಯವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ತೆಗೆದುಹಾಕುತ್ತದೆ. ಒಂದು ಕಾರ್ಯದ ಗುರುತನ್ನು ಯಾವಾಗ ಕಾಪಾಡಿಕೊಳ್ಳಬೇಕು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಂಪೈಲರ್ ಸಾಕಷ್ಟು ಸ್ಮಾರ್ಟ್ ಆಗಿದ್ದರೆ, useEvent ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿದ ಸಮಸ್ಯೆಯನ್ನು ಅದು ಪರಿಹರಿಸಬಹುದು, ಆದರೆ ಹೆಚ್ಚು ಮೂಲಭೂತ, ಸ್ವಯಂಚಾಲಿತ ಮಟ್ಟದಲ್ಲಿ.
• ಪರ್ಯಾಯ ಪರಿಹಾರಗಳು: ಪ್ರಮುಖ ತಂಡವು ಅದೇ ರೀತಿಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಲು ಇತರ, ಬಹುಶಃ ಸರಳವಾದ API ಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತಿರಬಹುದು, ಹೊಸ ಹುಕ್ ಪರಿಕಲ್ಪನೆಯನ್ನು ಪರಿಚಯಿಸದೆ.

ನಾವು ಅಧಿಕೃತ ನಿರ್ದೇಶನಕ್ಕಾಗಿ ಕಾಯುತ್ತಿರುವಾಗ, useEvent ನ ಹಿಂದಿನ ಪರಿಕಲ್ಪನೆಯು ನಂಬಲಾಗದಷ್ಟು ಮೌಲ್ಯಯುತವಾಗಿದೆ. ಇದು ಒಂದು ಈವೆಂಟ್‌ನ ಗುರುತನ್ನು ಅದರ ಅನುಷ್ಠಾನದಿಂದ ಬೇರ್ಪಡಿಸಲು ಸ್ಪಷ್ಟವಾದ ಮಾನಸಿಕ ಮಾದರಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅಧಿಕೃತ ಹುಕ್ ಇಲ್ಲದೆಯೂ, ಡೆವಲಪರ್‌ಗಳು ಮೇಲಿನ ಪಾಲಿಫಿಲ್ ಮಾದರಿಯನ್ನು ಬಳಸಬಹುದು (ಸಾಮಾನ್ಯವಾಗಿ use-event-listener ನಂತಹ ಸಮುದಾಯ ಲೈಬ್ರರಿಗಳಲ್ಲಿ ಕಂಡುಬರುತ್ತದೆ) ಅಂತಹುದೇ ಫಲಿತಾಂಶಗಳನ್ನು ಸಾಧಿಸಲು, ಅಧಿಕೃತ ಆಶೀರ್ವಾದ ಮತ್ತು ಲಿಂಟರ್ ಬೆಂಬಲವಿಲ್ಲದೆ.

ತೀರ್ಮಾನ: ಈವೆಂಟ್‌ಗಳ ಬಗ್ಗೆ ಯೋಚಿಸುವ ಹೊಸ ವಿಧಾನ

useEvent ನ ಪ್ರಸ್ತಾಪವು React ಹುಕ್‌ಗಳ ವಿಕಾಸದಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಕ್ಷಣವನ್ನು ಗುರುತಿಸಿದೆ. ಕಾರ್ಯ ಗುರುತು, useCallback ಮತ್ತು useEffect ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಗಳ ನಡುವಿನ ಪರಸ್ಪರ ಕ್ರಿಯೆಯಿಂದ ಉಂಟಾಗುವ ಅಂತರ್ಗತ ಘರ್ಷಣೆ ಮತ್ತು ಅರಿವಿನ ಓವರ್‌ಹೆಡ್‌ನಿಂದ React ತಂಡದ ಮೊದಲ ಅಧಿಕೃತ ಸ್ವೀಕಾರವಾಗಿತ್ತು.

useEvent ಸ್ವತಃ React ನ ಸ್ಥಿರ API ಯ ಭಾಗವಾಗುತ್ತದೆಯೇ ಅಥವಾ ಅದರ ಉತ್ಸಾಹವನ್ನು ಮುಂಬರುವ React ಕಂಪೈಲರ್‌ಗೆ ಹೀರಿಕೊಳ್ಳುತ್ತದೆಯೇ, ಅದು ಎತ್ತಿ ತೋರಿಸುವ ಸಮಸ್ಯೆ ನಿಜ ಮತ್ತು ಮುಖ್ಯವಾಗಿದೆ. ಇದು ನಮ್ಮ ಕಾರ್ಯಗಳ ಸ್ವರೂಪದ ಬಗ್ಗೆ ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗಿ ಯೋಚಿಸಲು ನಮ್ಮನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ:

• ಇದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಒಂದು ಕಾರ್ಯವೇ, ಅದರ ಗುರುತು ಸ್ಥಿರವಾಗಿರಬೇಕೇ?
• ಅಥವಾ ಇದು ಪರಿಣಾಮಕ್ಕೆ ರವಾನೆಯಾದ ಒಂದು ಕಾರ್ಯವೇ, ಆ ಕಾರ್ಯದ ತರ್ಕ ಬದಲಾದಾಗ ಪರಿಣಾಮವನ್ನು ಮರು-ಸಿಂಕ್ರೊನೈಸ್ ಮಾಡಲು ಕಾರಣವಾಗಬೇಕೇ?

ಈ ಎರಡು ಪ್ರಕರಣಗಳ ನಡುವೆ ಸ್ಪಷ್ಟವಾಗಿ ಪ್ರತ್ಯೇಕಿಸಲು ಒಂದು ಸಾಧನವನ್ನು - ಅಥವಾ ಕನಿಷ್ಠ ಒಂದು ಪರಿಕಲ್ಪನೆಯನ್ನು - ಒದಗಿಸುವ ಮೂಲಕ, React ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ, ಕಡಿಮೆ ದೋಷ-ಸಂಭವನೀಯ ಮತ್ತು ಕೆಲಸ ಮಾಡಲು ಹೆಚ್ಚು ಆನಂದದಾಯಕವಾಗಬಹುದು. ಅದರ ಅಂತಿಮ ರೂಪಕ್ಕಾಗಿ ನಾವು ಕಾಯುತ್ತಿರುವಾಗ, useEvent ನ ಆಳವಾದ ಅಧ್ಯಯನವು ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಸವಾಲುಗಳ ಬಗ್ಗೆ ಮತ್ತು React ನಂತಹ ಒಂದು ಚೌಕಟ್ಟನ್ನು ಶಕ್ತಿಯುತ ಮತ್ತು ಸರಳವೆಂದು ಭಾವಿಸುವಂತೆ ಮಾಡಲು ಹೋಗುವ ಅದ್ಭುತ ಎಂಜಿನಿಯರಿಂಗ್ ಬಗ್ಗೆ ಅಮೂಲ್ಯವಾದ ಒಳನೋಟವನ್ನು ಒದಗಿಸುತ್ತದೆ.